<template>
  <div class="dialog-wrapper">
    <Modal
      :title="title"
      footer-hide
      :value="value"
      :mask-closable="false"
      @on-cancel="handleCancel">
      <Form
        ref="form"
        :model="form"
        :rules="rules"
        :label-width="90"
        label-position="left">
        <FormItem label="标签名称" prop="label">
          <Input type="text" placeholder="请输入标签名称" v-model="form.label" />
        </FormItem>
        <FormItem label="标签备注" prop="remark">
          <Input type="textarea" placeholder="请输入标签备注" v-model="form.remark" />
        </FormItem>
        <FormItem>
          <Button type="error"  @click="handleCancel" style="margin-right: 10px;">取消</Button>
          <Button type="primary"  @click="handleSubmit" :loading="btnLoading">确认提交</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: 'collectDialog',
    props: {
      title: String,
      type: String,
      value: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: function() {
          return {
            label: '',
            remark: ''
          }
      } }
    },
    data () {
      return {
        btnLoading: false,
        form: {},
        rules: {
          label: [
            { required: true, message: '请输入标签名称', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请输入标签备注', trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      value (newValue) {
        if (newValue) {
          this.form = this.formData;
        }
      }
    },
    methods: {
      // 表单提交
      handleSubmit () {
        const { form } = this.$refs;
        form.validate(valid => {
          if (valid) {
            let param = this.type === 'add' ? 'collection-label' : 'collection-label/update';
            this.btnLoading = true;
            this.$http.post(`/helsinki/admin/${param}`, qs.stringify({
              ...this.form
            }))
            .then(({ data: { errcode, info, data } }) => {
              if (errcode == 0) {
                let message = this.type === 'add' ? '新增催收标签成功' : '编辑催收标签成功';
                this.$Message.success(message);
                this.$emit('ok');
              }
              this.btnLoading = false;
            }, error => {
              this.btnLoading = false;
              console.log(error.statusText);
            });
          }
        })
      },
      handleCancel () {
        this.$refs.form.resetFields();
        this.$emit('input', false);
      }
    }
  }
</script>

<style lang="scss" scoped>
  
</style>
